<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<meta name="keywords" content="天地图"/> 
<title>flex布局+定时器切换背景色</title> 
<style>
	.div1{
		height:300px;
		display: flex;
		flex-flow: row;
	}
	.div2{
		width:200px;
		background: red;
	}
	.div3{
		flex:1;
		background: blue;
		border:1px solid #fff;
	}
</style>
</head>
<body>

	<div class="div1">
		<div class="div2" id="div2">11</div>
		<div class="div3">333</div>
		<div class="div3">4444</div>
		<div class="div3">555</div>
	</div>
	<input type="checkbox">
</body>
	<script>
		var arr=["red","green","pink"];
		var i=-1;
		var oDiv=document.getElementById("div2");
		window.setInterval("changeC()",1000);
		function changeC(){
			i++;
			i%=arr.length;
			oDiv.style.backgroundColor=arr[i];
		}
		
	</script>
</html>